<template ref="app">
  <div id="app">
    <section id="left-bar">
      <div id="left-bar-content">
        <div id="logo-container">
          <img src="@/assets/mokey-player-logo.png">
        </div>
        <nav id="router-list">
          <div class="link-wrapper">
            <router-link to="/">音乐馆</router-link>
          </div>
          <div class="link-wrapper">
            <router-link to="/about">关于我们</router-link>
          </div>
        </nav>
      </div>
    </section>
    <section id="right-section">
      <div id="main">
        <div id="main-content">
          <router-view></router-view>
        </div>
      </div>
      <div id="bottom-bar">
        <MusicPlayer></MusicPlayer>
      </div>
    </section>
  </div>
</template>

<script>
import MusicPlayer from '@/components/MusicPlayer.vue'

export default {
  components: {
    MusicPlayer: MusicPlayer
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

:root {
  --left-bar-width: 200px;
  --bottom-bar-height: 72px;
}

#left-bar {
  box-sizing: border-box;
  left: 0;
  top: 0;
  position: fixed;
  height: 100%;
  width: var(--left-bar-width);
  background-color: rgb(240, 240, 240);
  padding: 0 20px;
  overflow: auto;
}

#left-bar-content {
  padding: 20px 0;
}

#logo-container {
  width: 100%;
  height: 50px;
  padding-top: 20px;
  padding-left: 8px;
}

#logo-container img {
  width: 60%;
  object-fit: contain;
}

#router-list {
  padding-top: 20px;
}

#right-section {
  box-sizing: border-box;
  right: 0;
  top: 0;
  position: fixed;
  height: 100%;
  width: calc(100% - var(--left-bar-width));
  overflow: hidden;
}

#main {
  box-sizing: border-box;
  right: 0;
  top: 0;
  height: calc(100% - var(--bottom-bar-height));
  width: 100%;
  padding: 0 40px;
  overflow: auto;
}

#bottom-bar {
  position: absolute;
  box-sizing: border-box;
  bottom: 0;
  height: var(--bottom-bar-height);
  width: 100%;
}

#main-content {
  padding: 20px 0;
}

nav {
  display: block;
  box-sizing: border-box;

  a {
    display: block;
    font-weight: bold;
    color: #2c3e50;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 5px;
    overflow: hidden;

    &.router-link-exact-active {
      color: #42b983;
    }
  }

  a:hover {
    background-color: rgb(222, 222, 222);
  }
}
</style>
